<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>Treeview - Ace Admin</title>

		<meta name="description" content="with selectable items(single &amp; multiple) and custom icons" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

		<!-- bootstrap & fontawesome -->
		<link rel="stylesheet" href="${pageContext.request.contextPath}/static/assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="${pageContext.request.contextPath}/static/assets/css/font-awesome.min.css" />

		<!-- page specific plugin styles -->

		<!-- text fonts -->
		<link rel="stylesheet" href="${pageContext.request.contextPath}/static/assets/css/ace-fonts.css" />

		<!-- ace styles -->
		<link rel="stylesheet" href="${pageContext.request.contextPath}/static/assets/css/ace.min.css" id="main-ace-style" />

		<!--[if lte IE 9]>
			<link rel="stylesheet" href="${pageContext.request.contextPath}/static/assets/css/ace-part2.min.css" />
		<![endif]-->
		<link rel="stylesheet" href="${pageContext.request.contextPath}/static/assets/css/ace-skins.min.css" />
		<link rel="stylesheet" href="${pageContext.request.contextPath}/static/assets/css/ace-rtl.min.css" />

		<!--[if lte IE 9]>
		  <link rel="stylesheet" href="${pageContext.request.contextPath}/static/assets/css/ace-ie.min.css" />
		<![endif]-->

		<!-- inline styles related to this page -->

		<!-- ace settings handler -->
		<script src="${pageContext.request.contextPath}/static/assets/js/ace-extra.min.js"></script>

		<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

		<!--[if lte IE 8]>
		<script src="${pageContext.request.contextPath}/static/assets/js/html5shiv.min.js"></script>
		<script src="${pageContext.request.contextPath}/static/assets/js/respond.min.js"></script>
		<![endif]-->
	</head>

	<body>
		<div class="main-content" > 
		</br>
				<table id="sample-table-1"
										class="table table-striped table-bordered table-hover">
										<thead>
											<tr>
												<td><a href="changeLocale?localeType=en_US"><spring:message
															code="page.index.english" /></a></td>
												<td><a href="changeLocale?localeType=zh_CN"><spring:message
															code="page.index.chinese" /></a></td>
												<td colspan="9"></td>
											</tr>
											<tr>
												<td colspan="11">
												<button type="button" class="btn btn-primary add-test">
													<span class="glyphicon glyphicon-user"></span> 
													<spring:message code="page.index.add" />
												</button>
												</td>
											</tr>
											<tr>
												<th><spring:message code="test.id.message" /></th>
												<th><spring:message code="test.name.message" /></th>
												<th><spring:message code="test.content.message" /></th>
												<th><spring:message code="test.chooseA.message" /></th>
												<th><spring:message code="test.chooseB.message" /></th>
												<th><spring:message code="test.chooseC.message" /></th>
												<th><spring:message code="test.chooseD.message" /></th>
												<th><spring:message code="test.answer.message" /></th>
												<th><spring:message code="test.description.message" /></th>
												<th><spring:message code="test.score.message" /></th>
												<th class="hidden-480"><spring:message
														code="user.action.message" /></th>
											</tr>
										</thead>
										<tbody>
											<c:forEach items="${testList.dates }" var="test">
												<tr>
													<td>${test.id}</td>
													<td>${test.examSubject.name }</td>
													<td>${test.content}</td>
													<td>${test.chooseA}</td>
													<td>${test.chooseB}</td>
													<td>${test.chooseC}</td>
													<td>${test.chooseD}</td>
													<td>${test.answer}</td>
													<td>${test.examTestType.testType}</td>
													<td>${test.examTestType.testTypeScore}分</td>
													<td><button class="btn btn-success show-test btn-xs">
															<span class="glyphicon glyphicon-list-alt"></span>
														</button>&nbsp;
														<button class="btn btn-info edit-test btn-xs">
															<span class="glyphicon glyphicon-pencil"></span>
														</button>&nbsp;
														<button class="btn btn-danger delete-test btn-xs">
															<span class="glyphicon glyphicon-trash">
															</span>
														</button></td>
												</tr>
											</c:forEach>
									
										</tbody>
										<tfoot>
									
						<%-- <jsp:include page="/template/page.jsp">
						<jsp:param name="url" value="userList"/>  
						<jsp:param name="items" value="${page.totalSize}"/>
						</jsp:include> --%>
																								
											<tr><td colspan="11">
												<jsp:include page="page.jsp">
												<jsp:param name="url" value="${pageContext.request.contextPath}/tests"/>  
												<jsp:param name="items" value="${testList.totalSize}"/> 
												<jsp:param name="pageSize" value="${testList.pageSize}"/>  
												</jsp:include>
												</td>
											</tr>
										</tfoot>
									</table>
			</div><!-- /.main-content -->
			
				<!-- 模态框显示信息 -->
					<div class="modal fade" id="showTestModal" tabindex="-1"
						role="dialog" aria-labelledby="showTestModalLabel"
						aria-hidden="true" data-backdrop="static">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal"
										aria-hidden="true">&times;</button>
									<h4 class="modal-title" id="myModalLabel">查看详细信息</h4>
								</div>
								<!-- 在这里添加一些文本 -->
								<div class="modal-body">
									<label  style="font-weight: bold;">试题科目：&nbsp;&nbsp;</label><span class="sub-name"></span><br/>
									<label  style="font-weight: bold;">题目：&nbsp;&nbsp;</label><span class="content"></span><span style="font-weight: bold;">&nbsp;&nbsp;----&nbsp;&nbsp;(</span>
									<span class="test-type"></span><span style="font-weight: bold;">,每题</span><span class="test-score"></span><span  style="font-weight: bold;">分。)</span><br/>
									<label  style="font-weight: bold;">A：&nbsp;&nbsp;</label><span class="choose-a"></span><br/>
									<label  style="font-weight: bold;">B：&nbsp;&nbsp;</label><span class="choose-b"></span><br/>
									<label  style="font-weight: bold;">C：&nbsp;&nbsp;</label><span class="choose-c"></span><br/>
									<label  style="font-weight: bold;">D：&nbsp;&nbsp;</label><span class="choose-d"></span><br/>
									<label style="font-weight: bold;">答案：&nbsp;&nbsp;</label><span class="answer" style="font-weight: bold;"></span>
								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-default"
										data-dismiss="modal">关闭</button>
								</div>
							</div>
							<!-- /.modal-content -->
						</div>
						<!-- /.modal -->
					</div>
					<!-- 模态框显示单个END -->
					
		<!-- 添加试题-模态框(Modal) -->
	<div class="modal fade" id="addTestModel" tabindex="-1" role="dialog"
		aria-labelledby="addTestModalLabel">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="model-title" id="addTestModalLabel">添加试题</h4>
				</div>
				<div class="modal-body">
					<form id="addTestForm" method="post">
						<p>
							<label>科目:</label><select name="subId">
								 <c:forEach items="${SubjectList }" var="subject">
								<option value="${subject.subId }" >${subject.name }</option>
								</c:forEach> 
							</select>
						</p>
						<p>
							<label>考题类型:&nbsp;&nbsp;</label>
						    <select name="testType">
						    	 <c:forEach items="${testType }" var="test">
								<option value="${test.id }" >${test.testType }</option>
								</c:forEach>
							</select><label class="testTypeScore"></label>;
						</p>
						<p>
							<label>题干</label>
							<textarea name="content" rows="8" cols="50" placeholder="填写题目内容"></textarea>
						<p>
							<label>A:&nbsp;&nbsp;</label><input type="text" name="chooseA"
								placeholder="填写候选答案内容，作为选项A" /></span>
						</p>
						<p>
							<label>B:&nbsp;&nbsp;</label><input type="text" name="chooseB"
								placeholder="填写候选答案内容，作为选项B" /></span>
						</p>
						<p>
							<label>C:&nbsp;&nbsp;</label><input type="text"  name="chooseC"
								placeholder="填写候选答案内容，作为选项C" /></span>
						</p>
						<p>
							<label>D:&nbsp;&nbsp;</label>
							<input type="text" name="chooseD" placeholder="填写候选答案内容，作为选项D" /></span>
						</p>			
							<label>答案:</label>
							 <span class="answerTotal">
									<input type="radio" name="answer" value="A" checked /> 
									<input type="checkbox" name="answer" value="A" />选项A 
									<input type="radio" name="answer" value="B" />
								    <input type="checkbox" name="answer" value="B" />选项B 
								    <input type="radio" name="answer" value="C" /> 
								    <input type="checkbox" name="answer" value="C" />选项C 
								    <input type="radio" name="answer" value="D" />
									<input type="checkbox" name="answer" value="D" />选项D
							</span>
						</p>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button id="addTestSaveBtn" type="button" class="btn btn-primary">保存</button>
				</div>
			</div>
		</div>
	</div>   
					
	<!-- 修改试题-模态框(Modal) -->
	<div class="modal fade" id="editTestModel" tabindex="-1" role="dialog"
		aria-labelledby="editTestModalLabel">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="model-title" id="editTestModalLabel">修改试题</h4>
				</div>
				<div class="modal-body">
					<form id="editTestForm" method="post">
						<input type="hidden" id="hiddenId" />
						<p>
							<label>科目:</label><select name="subId">
								 <c:forEach items="${SubjectList }" var="subject">
								<option value="${subject.subId }" >${subject.name }</option>
								</c:forEach> 
							</select>
						</p>
						<p>
							<label>考题类型:&nbsp;&nbsp;</label>
						    <select name="testType">
						    	 <c:forEach items="${testType }" var="test">
								<option value="${test.id }" >${test.testType }</option>
								</c:forEach>
							</select><label class="testTypeScore"></label>;
						</p>
						<p>
							<label>题干</label>
							<textarea name="content" rows="8" cols="50" placeholder="填写题目内容"></textarea>
						<p>
							<label>A:&nbsp;&nbsp;</label><input type="text" name="chooseA"
								placeholder="填写候选答案内容，作为选项A" /></span>
						</p>
						<p>
							<label>B:&nbsp;&nbsp;</label><input type="text" name="chooseB"
								placeholder="填写候选答案内容，作为选项B" /></span>
						</p>
						<p>
							<label>C:&nbsp;&nbsp;</label><input type="text"  name="chooseC"
								placeholder="填写候选答案内容，作为选项C" /></span>
						</p>
						<p>
							<label>D:&nbsp;&nbsp;</label>
							<input type="text" name="chooseD" placeholder="填写候选答案内容，作为选项D" /></span>
						</p>			
							<label>答案:</label>
							 <span class="answerTotal">
									<input type="radio" name="answer" value="A" checked /> 
									<input type="checkbox" name="answer" value="A" />选项A 
									<input type="radio" name="answer" value="B" />
								    <input type="checkbox" name="answer" value="B" />选项B 
								    <input type="radio" name="answer" value="C" /> 
								    <input type="checkbox" name="answer" value="C" />选项C 
								    <input type="radio" name="answer" value="D" />
									<input type="checkbox" name="answer" value="D" />选项D
							</span>
						</p>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button id="editTestSaveBtn" type="button" class="btn btn-primary">保存</button>
				</div>
			</div>
		</div>
	</div>  	
					
		
		
		
		
			<script type="text/javascript">
	
			$(".show-test").click(function() {
				var testId = $(this).parent().siblings().eq(0).text();
				$.ajax({
					type : 'POST',
					url : '${contextPath}/OnlineExam/findByTestId',
					data : {
						testId : testId
					},
					dataType : "json",
					success : function(data){
						$('#showTestModal .sub-name').text(data.name);
						$('#showTestModal .content').text(data.content);
						$('#showTestModal .test-type').text(data.examTestTypeVo.testType);
						$('#showTestModal .test-score').text(data.examTestTypeVo.testTypeScore);
						$('#showTestModal .choose-a').text(data.chooseA);
						$('#showTestModal .choose-b').text(data.chooseB);
						$('#showTestModal .choose-c').text(data.chooseC);
						$('#showTestModal .choose-d').text(data.chooseD);
						$('#showTestModal .answer').text(data.answer);
					}
				});
				$("#showTestModal").modal('show');
			});
			</script>
			
	<script type="text/javascript">
			//触发添加摸态框
			$('.add-test').click(function(){
				$('#addTestModel').modal('show');	
			});
			
			//保存并添加试题
			$('#addTestSaveBtn').click(function(){
				/* if($('#addTestForm').valid()){ //前台校验 */
					
					var subId = $('#addTestForm select[name="subId"]').val();
					var testType = $('#addTestForm select[name="testType"]').val();
					var content = $('#addTestForm textarea[name="content"]').val();
					var chooseA = $('#addTestForm input[name="chooseA"]').val();
					var chooseB = $('#addTestForm input[name="chooseB"]').val();
					var chooseC = $('#addTestForm input[name="chooseC"]').val();
					var chooseD = $('#addTestForm input[name="chooseD"]').val();
					var answerString = '';
					
					
					if(testType == 1){
						answerString += $('#addTestForm input[name="answer"]:radio:checked').val();
					} else if(testType == 2){
						var array = $('#addTestForm input[name="answer"]:checkbox:checked');
						$.each(array, function(index, item){
							answerString += (index ==0 ? $(item).val() : (',' + $(item).val()));
						});
					}else{
						alert('无这些试题类型!');
					}
						
					$.ajax({ //通过后传到后台
						type: 'POST',
						url: '${contextPath}/OnlineExam/saveTest',
						data: {
							subId: subId,
							'examTestTypeVo.id': testType,
							content: content,
							chooseA: chooseA,
							chooseB: chooseB,
							chooseC: chooseC,
							chooseD: chooseD,
							answer: answerString		
						},
						dataType: "json",
						success: function(data){
							//判断成功与否
							if(data.success){
								alert('添加成功');
								window.location.reload();
							}else{
								//不成功则输出错误信息
								var messageMap = data.messageMap;
								for(var key in messageMap){
									var value = messageMap[key];
									$('#addTestForm input[name]"' + key + '"]').after('<label class="jsr303-message-label">' + value + '</label>');
								}
								alert('添加失败！-' + messageMap['message']);
							}
						}
					});	
				//}
			});
			
			//触发修改摸态框
			$('.edit-test').click(function(){
				var testId = $(this).parent().siblings().eq(0).text();
				$("#hiddenId").val(testId);
				$('#editTestModel').modal('show');	
			});
			
			//保存并修改试题
			$("#editTestSaveBtn").click(function(){
				var testId = $("#hiddenId").val();
				var subId = $('#editTestForm select[name="subId"]').val();
				var testType = $('#editTestForm select[name="testType"]').val();
				var content = $('#editTestForm textarea[name="content"]').val();
				var chooseA = $('#editTestForm input[name="chooseA"]').val();
				var chooseB = $('#editTestForm input[name="chooseB"]').val();
				var chooseC = $('#editTestForm input[name="chooseC"]').val();
				var chooseD = $('#editTestForm input[name="chooseD"]').val();
				var answerString = '';
				
				
				if(testType == 1){
					answerString += $('#editTestForm input[name="answer"]:radio:checked').val();
				} else if(testType == 2){
					var array = $('#editTestForm input[name="answer"]:checkbox:checked');
					$.each(array, function(index, item){
						answerString += (index ==0 ? $(item).val() : (',' + $(item).val()));
					});
				}else{
					alert('无这些试题类型!');
				}
				
				$.ajax({ //通过后传到后台
					type: 'POST',
					url: '${contextPath}/OnlineExam/editTest',
					data: {
						id: testId,
						subId: subId,
						'examTestTypeVo.id': testType,
						content: content,
						chooseA: chooseA,
						chooseB: chooseB,
						chooseC: chooseC,
						chooseD: chooseD,
						answer: answerString		
					},
					dataType: "json",
					success: function(data){
						//判断成功与否
						if(data.success){
							alert('修改成功');
							window.location.reload();
						}
					}
				});	
			//}
		});
			
			$(".delete-test").click(function() {
				var testId = $(this).parent().siblings().eq(0).text();
				$.ajax({
					type : 'POST',
					url : '${contextPath}/OnlineExam/deleteUser',
					data : {
						testId : testId
					},
					dataType : "json",
					success: function(data){
						//判断成功与否
						if(data.success){
							alert('修改成功');
							window.location.reload();
						}
					}
				});	
			});
			
			</script>
	</body>
</html>
